<template>
  <section>
    <el-form size="mini" label-width="80px">
      <el-form-item label="分类名：" >
        <el-input v-model="category.name"/>
      </el-form-item>
      <el-form-item label="描述：" >
        <el-input v-model="category.description" type="textarea"/>
      </el-form-item>
      <el-form-item label="属性：" >
        <el-row v-for="(prop,index) in propList" :key="index">
          <el-col :span="2">{{prop.key}}</el-col>
          <el-col :span="4">
            <el-switch v-model="prop.val" active-text="是" inactive-text="否"></el-switch>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="">
        <el-button size="mini" type="success" @click="confirmBtn">{{category.id?'保存':'新建'}}</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import dateFormater from '@/common/date-formater'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "newProductCategory",
    props:['category'],
    data() {
      return {
        propList:[{key:'虚拟',val:false,code:'virtual'}],
      }
    },
    created(){
      console.log(this.category)
      this.initProp()
    },
    computed: {
      ...mapGetters(['department']),
    },
    watch:{},
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      initProp(){
        for(let key in this.category.data){
          this.propList.forEach(p=>{
            if(key === p.code){
              console.log(this.category.data[key])
              p.val= this.category.data[key]
            }
          })
        }
        console.log(this.propList)
      },
      confirmBtn(){
        let kv={}
        this.propList.forEach(prop=>{
          kv[prop.code]=prop.val
        })
        console.log(kv)
        this.category.data={...kv}
        console.log(this.category,this.propList)
        this.$emit('confirm',this.category)
      },
    }
  }
</script>

<style scoped>

</style>
